<template>
  <transition
    name="fade"
    appear 
    enter-active-class="fade-enter-active"
    leave-active-class="fade-leave-active"
    >
    <div class="CustToast" :class="type" v-if="showToast">
      <span class="icon">
        <img :src="iconSrc" />
      </span>
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  /**
   * 自己封装的Toast v0.2
   * params: showToast Boolean 是否激活toast 默认 false
   * params: type String       toast提示类型 共normal success，fail，warning 四个选项 默认normal
   * params: message String    toast消息
   * params: duration Number      toast显示时间 默认 3000ms
   * */
  name: "CustToast",
  data() {
    return {
      showToast: true,
      type: "normal",
      message: "消息提示",
      duration: 3000
    };
  },
  computed: {
    iconSrc() {
      window.console.log("当前类型", this.type);
      let tipType = ["normal", "success", "warning", "fail"];
      if (tipType.includes(this.type)) {
        return require(`@/assets/images/${this.type}.png`);
      } else {
        throw "Toast type数据只允许为 normal, success, warning, fail 四种其中的一种，默认为normal";
      }
    }
  }
};
</script>

<style scoped>
/* .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter  {
  opacity: 0;
  background: red!important;
}
.fade-leave-to{
opacity: 0;
background: yellow!important;
} */
.CustToast {
  position: fixed;
  left: 50%;
  top: 100px;
  background: rgb(233, 233, 235);
  padding: 10px;
  border-radius: 5px;
  color: #909399;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  top:-100px;
  opacity: 0;
}
.fade-enter-to{
  top:100px;
}
.fade-leave-to{
  top:-100px;
  opacity: 0;
  }
.success {
  color: #67c23a;
  background: rgb(225, 243, 216);
}

.warning {
  color: #e6a23c;
  background: rgb(250, 236, 216);
}

.fail {
  color: #f56c6c;
  background: rgb(253, 226, 226);
}

.icon img {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-right: 4px;
}
</style>
